<!DOCTYPE html>
<html>
<head>
  <title>CSS Flexbox justify-content test</title>
  <style>
    #container > div {
      display: flex;
      border: 1px solid cyan;
      width: 350px;
    }

    #container > div > div {
      width: 50px;
      height: 50px;
      background: magenta;
      border: 1px solid black;
    }

    #flex-start {
      justify-content: flex-start;
    }

    #center {
      justify-content: center;
    }

    #flex-end {
      justify-content: flex-end;
    }

    #space-between {
      justify-content: space-between;
    }

    #space-around {
      justify-content: space-around;
    }

  </style>
</head>
<body>
<h1>CSS Flexbox justify-content test</h1>
<div id="container">
  <p>justify-content: flex-start</p>
  <div id="flex-start">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

  <p>justify-content: flex-end</p>
  <div id="flex-end">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

  <p>justify-content: center</p>
  <div id="center">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

  <p>justify-content: space-between</p>
  <div id="space-between">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>

  <p>justify-content: space-around</p>
  <div id="space-around">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>
</div>

</body>
</html>
